spb/websensor

1import { Skeleton, SkeletonPanel, SkeletonRows } from "@/components/ui";23export default function Loading() {4  return (5    <>6      <div className="mb-4 flex flex-col gap-2">7        <div className="flex gap-2">8          <Skeleton className="h-4 w-24" />9          <Skeleton className="h-4 w-16" />10          <Skeleton className="h-4 w-20" />11        </div>12        <Skeleton className="h-7 w-11/12 max-w-3xl" />13        <Skeleton className="h-7 w-2/3 max-w-xl" />14      </div>15      <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_340px]">16        <div className="flex flex-col gap-4">17          <SkeletonPanel lines={4} />18          <div className="panel overflow-hidden">19            <div className="flex gap-1 border-b border-line px-2 py-1.5">20              <Skeleton className="h-6 w-16" />21              <Skeleton className="h-6 w-24" />22              <Skeleton className="h-6 w-20" />23            </div>24            <div className="flex flex-col gap-1.5 p-3">25              {Array.from({ length: 8 }, (_, i) => (26                <Skeleton key={i} className={`h-3.5 ${i % 3 === 0 ? "w-11/12" : i % 3 === 1 ? "w-3/4" : "w-5/6"}`} />27              ))}28            </div>29          </div>30          <SkeletonPanel lines={5} />31          <div className="panel">32            <Skeleton className="m-3 h-2.5 w-20" />33            <SkeletonRows rows={4} />34          </div>35        </div>36        <aside className="flex flex-col gap-4">37          <div className="panel p-3">38            <div className="flex items-center gap-3">39              <Skeleton className="h-9 w-14" />40              <Skeleton className="h-3 w-32" />41            </div>42            <div className="mt-3 grid grid-cols-2 gap-x-4 gap-y-3">43              {Array.from({ length: 6 }, (_, i) => (44                <div key={i} className="flex flex-col gap-1.5">45                  <Skeleton className="h-2.5 w-16" />46                  <Skeleton className="h-1 w-full" />47                </div>48              ))}49            </div>50          </div>51          <SkeletonPanel lines={7} />52          <SkeletonPanel lines={3} />53        </aside>54      </div>55    </>56  );57}58